<template>
  <el-row :gutter="20">
    <el-col :span="cateSpan"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="24 - cateSpan">
      <el-row>
        <el-col :span="18">
          <el-form :inline="true" ref="entityFormRef" label-width="100px">
            <template v-for="item in quickPropList">
              <el-form-item v-if="item.dataType === dataType.STR.val" :label="item.name" :prop="item.code">
                <el-input v-model="item.value" :maxlength="100" />
              </el-form-item>
              <el-form-item v-if="item.dataType === dataType.NUM.val" :label="item.name" :prop="item.code">
                <el-input-number v-model="prop.value" controls-position="right" />
              </el-form-item>
              <el-form-item v-if="item.dataType === dataType.DATE.val" :label="item.name" :prop="item.code">
                <el-date-picker v-model="item.range" type="daterange" range-separator="-" />
              </el-form-item>
            </template>
          </el-form>
        </el-col>
        <el-col :span="2" :offset="20">
          <el-button-group class="ml-4">
            <el-button type="primary">搜索</el-button>
            <el-button>高级搜索</el-button>
          </el-button-group>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table height="300" border fit>
            <template v-for="prop in viewPropList">
              <el-table-column :label="prop.name" :prop="prop.code"></el-table-column>
            </template>
            <el-table-column label="操作"></el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import { defineComponent, getCurrentInstance, reactive, toRefs } from 'vue';
import { ModeTypeEnum } from '@/store/enums/ModeTypeEnum';
import { PageTypeEnum } from '@/store/enums/PageTypeEnum';
import { SwitchEnum } from '@/store/enums/SwitchEnum';
import PropEnum from '@/store/enums/PropEnum';
import modelApi from '@/api/module/model';

const { dataType } = PropEnum;

export default defineComponent({
  name: 'HomepageView',
  props: ['pageType', 'areaCode', 'modelCode'],
  setup(props) {
    const { proxy } = getCurrentInstance();
    const { pageType, modelCode } = toRefs(props);
    const { sys_user_vip, sys_def_type } = proxy.useDict('sys_user_vip', 'sys_def_type');
    const vueData = reactive({
      entityFormTitle: '',
      entityFormOpen: false,
      entityForm: {},
      modelInfo: {},
      cateSpan: 0, // 分类占宽
      quickPropList: [],
      viewPropList: [],
    });

    function load() {
      modelApi.getFullInfo(modelCode.value).then(res => {
        vueData.modelInfo = res.data;
        vueData.quickPropList = vueData.modelInfo.propList.filter((it) => (it.quickSw === SwitchEnum.OPEN));
        vueData.viewPropList = vueData.modelInfo.propList.filter((it) => (it.viewSw === SwitchEnum.OPEN));
      });
    }

    return {
      dataType,
      pageType,
      PageTypeEnum,
      SwitchEnum,
      ModeTypeEnum,
      sys_user_vip,
      sys_def_type,
      ...toRefs(vueData),
      load,
    }
  },
});
</script>

<style scoped>

</style>